import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// import HomeView from '../views/HomeView.vue'
// import IkunView from '@/views/IkunView.vue'
// import SearchView from '@/views/SearchView.vue'
// import NotFind from '@/views/NotFind.vue'
// 1.如果页面路径是空的,使用重定向跳转到首页
// 2.如果页面路径是不存在的,使用路由404跳转对应页面

// 3.路由模式设置
// 1.hash模式:createWebHashHistory
// 2.history模式:createWebHistory
//区别:哈希模式网址有#,history模式无#
const router = createRouter({
  //history模式
  history: createWebHistory(import.meta.env.BASE_URL),
  // hash模式
  // history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    //----普通路由--------
    // {
    //   //重定向->路径为空跳转到home页面
    //   path: '/',
    //   redirect: '/home',},
    // {
    //   // 页面不存在,跳转至404页面
    //   path: '/:catchAll(.*)',
    //   component: NotFind, },
    // {
    //   //路径
    //   path: '/home',
    //   //路由名称
    //   name: 'home',
    //   //组件
    //   component: HomeView,},
    // 查询参数注册路由
    // {
    //   //路径
    //   path: '/search',
    //   //路由名称
    //   name: 'search',
    //   //组件
    //   component: SearchView,
    // },
    // 动态参数注册路由:/search/:参数名
    // 由于点击到搜索页面的时候，会传递一个参数,但是这个参数是可选的，所以需要加一个问号,才会使无参跳转页面时不会空白
    // {
    //   //路径
    //   path: '/search/:key?',
    //   //路由名称
    //   name: 'search',
    //   //组件
    //   component: SearchView,
    // },
    // {
    //   //路径
    //   path: '/ikun',
    //   //路由名称
    //   name: 'ikun',
    //   //组件
    //   component: IkunView,
    // },

    // {
    //   path: '/about',
    //   name: 'about',
    //   component: () => import('../views/AboutView.vue'),
    // },

    //路由懒加载
    {
      //重定向->路径为空跳转到home页面
      path: '/',
      redirect: '/home',
    },
    {
      // 页面不存在,跳转至404页面
      path: '/:catchAll(.*)',
      component: () => import('@/views/NotFind.vue'),
    },
    {
      //路径
      path: '/home',
      //路由名称
      name: 'home',
      //组件
      component: () => import('@/views/HomeView.vue'),
    },
    {
      //路径
      path: '/search/:key?',
      //路由名称
      name: 'search',
      //组件
      component: () => import('@/views/SearchView.vue'),
    },
    {
      //路径
      path: '/ikun',
      //路由名称
      name: 'ikun',
      //组件
      component: () => import('@/views/IkunView.vue'),
    },

    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router
